<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form slot="header" ref="queryForm" :inline="true" :model="queryParams" label-width="75px">
			<el-form-item label="用户ID:" prop="uuid">
				<el-input v-model.trim="queryParams.uuid" clearable maxlength="6" placeholder="请输入用户ID" show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model.trim="queryParams.mobile" clearable maxlength="11" placeholder="请输入手机号码" show-word-limit />
			</el-form-item>
			<el-form-item label="用户状态:" prop="status">
				<el-select v-model="queryParams.status" placeholder="请选择用户状态">
					<el-option :value="null" label="全部"></el-option>
					<el-option :value="0" label="启用"></el-option>
					<el-option :value="1" label="禁用"></el-option>
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="创建时间:"></start-end-time>
			<el-form-item label="邀请人ID:" prop="referrerUuid">
				<el-input v-model="queryParams.referrerUuid" clearable placeholder="请输入邀请人ID" />
			</el-form-item>
			<el-form-item label="实名状态:" prop="status">
				<el-select v-model="queryParams.realStatus" placeholder="请选择用户状态">
					<el-option :value="null" label="全部"></el-option>
					<el-option :value="1" label="已实名"></el-option>
					<el-option :value="0" label="未实名"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="card" class="mb-[24px] flex items-center">
			<l-statistical-card left-name="用户总数" :left-value="userStatistics.totalCount" :right-value="userStatistics.lastTotalCount" />
			<l-statistical-card left-name="启用用户" :left-value="userStatistics.totalCount - userStatistics.disableCount" :right-value="userStatistics.lastTotalCount - userStatistics.lastDisableCount" />
			<l-statistical-card left-name="禁用用户" :left-value="userStatistics.disableCount" :right-value="userStatistics.lastDisableCount" />
		</div>
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增 </el-button>
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<el-table v-loading="loading" :data="userList" stripe @sort-change="handleSortChange">
			<LTableColumn prop="uuid" type="index" label="序号" width="50"> </LTableColumn>
			<LTableColumn prop="uuid" label="用户ID" />
			<LTableColumn prop="referrerUuid" label="邀请人ID" />
			<LTableColumn prop="mobile" label="手机号码" />
			<LTableColumn prop="nickname" label="昵称" />
			<el-table-column :formatter="emptyToString" align="center" label="头像">
				<template slot-scope="scope">
					<el-image :preview-src-list="[scope.row.avatar]" :src="scope.row.avatar" style="width: 50px; height: 50px"></el-image>
				</template>
			</el-table-column>
			<LTableColumn prop="realStatus" label="实名状态">
				<template slot-scope="scope">
					<span v-if="scope.row.realStatus === 0">未实名</span>
					<span v-if="scope.row.realStatus === 1">已实名</span>
				</template>
			</LTableColumn>
			<LTableColumn prop="realName" label="真实名称" />
			<LTableColumn prop="idCard" label="身份证号" />
			<LTableColumn prop="consumerRoll" label="消费券" />
			<LTableColumn prop="goodsRollWait" label="提货单" />
			<LTableColumn prop="rechargeLimit" label="代采购额度" />
			<LTableColumn
				type="switch"
				prop="status"
				label="用户状态"
				min-width="156"
				:switch-options="{
					activeText: '正常',
					activeValue: 0,
					inactiveText: '禁用',
					inactiveValue: 1,
				}"
				@change="statusChange($event.value, $event.row.id)"
			/>
			<LTableColumn prop="createTime" type="time" label="创建时间" :min-width="200" />
			<LTableColumn type="options" :width="tableAction">
				<template slot-scope="{ row }">
					<el-button v-hasPermi="['mall:user:edit']" type="primary" @click="handleUpdate(row)">编辑 </el-button>
					<el-button v-hasPermi="['mall:user:detail']" type="primary" @click="handleDetail(row.id)">详情 </el-button>
				</template>
			</LTableColumn>
		</el-table>
		<!-- 添加或编辑用户对话框 -->
		<l-dialog v-model="open" :loading.sync="formLoading" :title="title" width="453px" @close="cancel" @formClose="cancel" @formSubmit="submitForm">
			<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px">
				<el-form-item label="邀请人ID:" prop="referrerUuid">
					<el-input v-model.trim="form.referrerUuid" :disabled="title !== '新增'" maxlength="6" placeholder="请输入邀请人ID" :show-word-limit="title !== '新增'" />
				</el-form-item>
				<el-form-item v-if="title !== '新增'" label="用户ID:" prop="uuid">
					<el-input v-model.trim="form.uuid" disabled placeholder="请输入用户ID" />
				</el-form-item>
				<el-form-item label="用户昵称:" prop="nickname">
					<el-input v-model.trim="form.nickname" maxlength="11" placeholder="请输入用户昵称" />
				</el-form-item>
				<el-form-item label="手机号码:" prop="mobile">
					<el-input v-model.trim="form.mobile" maxlength="11" placeholder="请输入手机号码" show-word-limit />
				</el-form-item>
				<el-form-item :prop="title === '编辑' ? '' : 'password'" label="密码:">
					<el-input v-model.trim="form.password" placeholder="请输入用户密码" type="password" />
				</el-form-item>
				<el-form-item label="上传头像" prop="avatar">
					<l-upload-image ref="avatar" v-model="form.avatar" height="106px" width="106px" :limit="1" class="w-full">
						<div class="flex flex-col items-center">
							<svg-icon icon-class="add" size="20px" color="#CCCCCC" class="mb-[6px]"></svg-icon>
							<el-tooltip effect="dark" content="支持图片类型jpj,png，图片大小不超过4M。" placement="top">
								<div class="text-[14px] text-[#cccccc] cursor-pointer">上传图片 <i class="el-icon-question"></i></div>
							</el-tooltip>
						</div>
					</l-upload-image>
				</el-form-item>
			</el-form>
		</l-dialog>
		<!-- 详情 -->
		<l-dialog v-model="openDetails" :show-button="false" title="详情" width="453px" @close="handleClose" @formSubmit="handleClose">
			<el-form disabled label-position="left" label-width="100px">
				<el-form-item label="用户ID:">
					<el-input :value="info.uuid" />
				</el-form-item>
				<el-form-item label="手机号码:">
					<el-input :value="info.mobile" />
				</el-form-item>
				<el-form-item label="邀请人ID:">
					<el-input :value="info.referrerUuid" />
				</el-form-item>
				<el-form-item label="头像:">
					<div class="flex w-full">
						<el-image class="!w-[199px] !h-[104px] mr-[16px] rounded-[8px]" :z-index="9999" :src="info.avatar" :preview-src-list="[info.avatar]"></el-image>
					</div>
				</el-form-item>
				<el-form-item label="状态:">
					<el-input :value="info.status === 0 ? '启用' : '禁用'" />
				</el-form-item>
				<el-form-item label="注册时间:">
					<el-input :value="info.createTime" />
				</el-form-item>
			</el-form>
		</l-dialog>
	</l-page>
</template>

<script>
import { addUser, editUserStatus, getUser, getUserInfo, listUser, queryUserStatistics, updateUser } from '@/api/mall/user';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';
export default {
	name: 'Member',
	components: { startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 总条数
			total: 0,
			// 用户表格数据
			userList: [],
			openDetails: false,
			info: {},
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,

			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				uuid: null,
				username: null,
				referrerUuid: null,
				headType: null,
				mobile: null,
				status: null,
				type: 1,
				realStatus: null,
				realName: null,
				idCard: null,
				goodsRollWait: null,
				avatar: null,
				nickname: null,
			},
			// 表单参数
			form: {
				username: null,
				password: null,
				twoPassword: null,
				referrerUuid: null,
				// userLevel: null,
				memberType: null,
				mobile: null,
				avatar: null,
				nickname: null,
			},
			formLoading: false,

			// 表单校验
			rules: {
				nickname: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{
						min: 6,
						message: '密码长度最小为6位数',
						trigger: 'blur',
					},
				],
				// twoPassword: [
				// 	{ required: true, message: '请输入确认密码', trigger: 'blur' },
				// 	{
				// 		min: 6,
				// 		message: '确认密码长度最小为6位数',
				// 		trigger: 'blur',
				// 	},
				// ],
				mobile: [
					{ required: true, message: '手机号码不能为空', trigger: 'blur' },
					{
						min: 11,
						max: 11,
						message: '手机号码格式为11位数',
						trigger: 'blur',
					},
					{
						pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
						message: '手机号码格式不正确',
						trigger: 'blur',
					},
				],
			},
			userStatistics: {
				totalCount: 0,
				lastTotalCount: 0,
				disableCount: 0,
				lastDisableCount: 0,
				userCount: 0,
				lastUserCount: 0,
				vipCount: 0,
				lastVipCount: 0,
			},
		};
	},
	created() {
		this.getList();
		this.queryUserStatistics();
	},
	methods: {
		queryUserStatistics() {
			queryUserStatistics().then((res) => {
				this.userStatistics = res.data;
			});
		},
		handleClose() {
			this.openDetails = false;
		},
		avatar(res, file) {
			this.form.avatar = res.avatar;
		},
		handleDetail(id) {
			getUserInfo(id).then((response) => {
				this.info = response.data;
				this.openDetails = true;
			});
		},
		statusChange(event, row) {
			this.loading = true;
			editUserStatus({
				id: row,
				status: event,
			}).then(() => {
				this.msgSuccess('编辑成功');
				this.getList();
			});
		},
		getList() {
			this.loading = true;
			listUser(this.queryParams)
				.then((response) => {
					this.userList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 取消按钮
		cancel() {
			this.resetForm('form');
			this.open = false;
		},
		getTime(startTime, endTime) {
			this.queryParams.startTime = startTime;
			this.queryParams.endTime = endTime;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			//重置时间
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.form.id = null;
			this.open = true;
			this.title = '新增';
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			this.form.id = row.id;
			getUser(row.id).then((response) => {
				this.open = true;
				this.$nextTick(() => {
					this.form.nickname = response.data.nickname;
					this.form.mobile = response.data.mobile;
					this.form.referrerUuid = response.data.referrerUuid;
					this.form.uuid = response.data.uuid;
					this.form.avatar = response.data.avatar;
					this.title = '编辑';
				});
			});
		},
		handleOn() {
			this.active--;
			this.$nextTick(() => {
				this.form.avatar && this.$refs.avatar.syncElUploads(this.form.avatar);
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.formLoading = true;
			this.$refs['form'].validate((valid) => {
				if (valid) {
					const obj = {
						nickname: this.form.nickname,
						mobile: this.form.mobile,
						password: this.form.password,
						referrerUuid: this.form.referrerUuid,
						avatar: this.form.avatar,
					};
					// if (this.form.password && this.form.password !== this.form.twoPassword) {
					// 	this.$message.error('2次密码输入不一致!');
					// 	this.formLoading = false;
					// 	return;
					// }
					if (this.form.id != null) {
						obj.id = this.form.id;
						updateUser(obj)
							.then(() => {
								this.msgSuccess('编辑成功');
								this.open = false;
								this.getList();
							})
							.finally(() => {
								this.formLoading = false;
							});
					} else {
						addUser(obj)
							.then(() => {
								this.msgSuccess('新增成功');
								this.open = false;
								this.getList();
							})
							.finally(() => {
								this.formLoading = false;
							});
					}
				} else {
					setTimeout(() => {
						this.formLoading = false;
					}, 100);
				}
			});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download3('/mall/user/export', { ...this.queryParams }, `用户列表${new Date().getTime()}.xlsx`);
		},
	},
};
</script>
<style lang="scss" scoped>
.content {
	.content-info {
		padding: 0 20px;

		.title {
			color: #333333;
			font-weight: 900;
		}

		.line {
			background: #e5e5e5;
			height: 1px;
			margin-top: 40px;
			margin-bottom: 35px;
		}

		.image__preview {
			display: flex;
			justify-content: center;

			.image {
				width: 329px;
				height: 162px;
				margin: 0 10px;
				display: block;
				border-radius: 8px;
			}
		}

		.info {
			display: flex;
			margin-bottom: 15px;
			justify-content: space-between;

			> div {
				width: 30%;
				height: 30px;
				line-height: 40px;
				display: flex;
				color: #333333;
				justify-content: center;

				.label {
					width: 100px;
					font-size: 12px;
					font-weight: 400;
					line-height: 60px;
					color: #808a97;
					opacity: 1;
				}

				.text {
					width: 225px;
					font-size: 14px;
					box-sizing: border-box;
					font-weight: 400;
					line-height: 60px;
					color: #333333;
					opacity: 1;

					&.red {
						color: #f14a46;
					}
				}
			}
		}

		.info-plus {
			> div {
				width: 100%;

				.text {
					width: 593px;
				}
			}
		}
	}
}
</style>
